<template>
  <div id="registerFrom">
    <el-form label-position="right" label-width="80px" :model="formLabelAlign" ref="rForm" :rules="rules">
    <el-form-item label="用户/商家">
    <el-radio-group v-model="formLabelAlign.categary">
      <el-radio label="用户"></el-radio>
      <el-radio label="商家"></el-radio>
    </el-radio-group>
  </el-form-item>
      <el-form-item label="用户名 :" prop="username">
        <el-input v-model.trim="formLabelAlign.username" @keyup.enter.native="register" ></el-input>
      </el-form-item>
      <el-form-item label="密码 :" prop="password">
        <el-input v-model.trim="formLabelAlign.password" show-password @keyup.enter.native="register"></el-input>
      </el-form-item>
      <el-form-item>
            <el-button  class="btn" el-button type="primary" @click="register">立即注册</el-button>
            <el-button class="goLogin btn" @click="changeLoginStatus">前去登录</el-button>
  </el-form-item>
    </el-form>
  </div>
</template>

<script>
import qs from 'qs';
  export default {
    data() {
      return {
        formLabelAlign: {
          username: '',
          password: '',
          categary:"用户"
        },
         rules: {
          username: [
            { required: true,message: '请输入用户名', trigger: 'blur' },
            {min: 3, max: 10,message:"长度不可小于3大于10",trigger: 'blur'},
            {pattern:/^[a-zA-Z0-9]{3,10}$/ ,message:"请输入3到10位数字或字母,不可以输入特殊符号及中文",trigger:"blur"}
          ],
          password: [
            { required:true, message: '密码不能为空', trigger:"blur"},
             {pattern:/^[a-zA-Z0-9]{4,16}$/ ,message:"请输入6到16位数字或字母,不可以输入特殊符号或中文",trigger:"blur"}
          ],
      }
    }
    },
    props:['changeLoginStatus'],
    methods:{
      register(){
      this.$refs.rForm.validate(async (valid) => {
            if (valid) {
          //验证通过的逻辑
          // 发送请求将表单数据提交用户,返回登录部分,弹出注册成功的提示
          let res = await this.$http({
            method:"POST",
            url:'http://10.3.136.136:8888/register',
            data:qs.stringify(this.formLabelAlign),
            headers:{ 'content-type':'application/x-www-form-urlencoded'},
          })
          if(res.status.code !== 200){
            this.$message({
          message: res.message,
          type: 'warning'
           });
           return
          }
           this.$message({
          message: '注册成功',
          type: 'success'
        });
          this.changeLoginStatus()
        } 
      })
        }
    }
  }
</script>

<style lang="scss" scoped>
#registerFrom{
    position: absolute;
    top: 51.5%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 400px;
    height: 100%;
    .btn {
        width: 45%;
    }
    .goLogin{
        position: absolute;
        right: 0;
    }
}
</style>